<template>
  <div class="bgContainerStyle" id="mainLayout">
    <div class="bannerView">
      <div class="containerOverview">
        <div class="leftContainer">
          <div class="leftContainerBar">
            <h1 class="leftContainerTop6">TOP6</h1>
            <div style="width: 260px; height: 180px" ref="barEcharts"></div>
          </div>
          <div class="leftContainerRadar">
            <h1 class="leftContainerRadarBanner">雷达图</h1>
            <div
              style="width: 260px; height: 190px; margin-top: 20px"
              ref="radarEcharts"
              id="rabar"
            ></div>
          </div>
        </div>
        <div class="centerContainer">
          <div class="amountData">
            数据总量:
            <span
              ><el-statistic
                group-separator=","
                :value="sjzl"
                class="topH2Style"
              ></el-statistic></span
            >条记录
          </div>
          <ul class="flexContainer">
            <li class="liStyleSHow">
              <div class="liStyleSHowBgLineLeft planeLine"></div>
              <div class="liStyleShowBgLineRight">
                航迹
                <span
                  ><el-statistic
                    group-separator=","
                    :value="dataVolumes.jcsjj"
                  ></el-statistic
                ></span>
              </div>
            </li>
            <li class="liStyleSHow">
              <div class="liStyleSHowBgLineLeft truthValue"></div>
              <div class="liStyleShowBgLineRight">
                真值
                <span
                  ><el-statistic
                    group-separator=","
                    :value="dataVolumes.zlsjj"
                  ></el-statistic
                ></span>
              </div>
            </li>
            <li class="liStyleSHow">
              <div class="liStyleSHowBgLineLeft frequency"></div>
              <div class="liStyleShowBgLineRight">
                频谱
                <span
                  ><el-statistic
                    group-separator=","
                    :value="dataVolumes.cssjj"
                  ></el-statistic
                ></span>
              </div>
            </li>
            <li class="liStyleSHow">
              <div class="liStyleSHowBgLineLeft pointBefore"></div>
              <div class="liStyleShowBgLineRight">
                凝聚后点迹
                <span
                  ><el-statistic
                    group-separator=","
                    :value="dataVolumes.cjsjj"
                  ></el-statistic
                ></span>
              </div>
            </li>
            <li class="liStyleSHow">
              <div class="liStyleSHowBgLineLeft pointAfter"></div>
              <div class="liStyleShowBgLineRight">
                凝聚前点迹
                <span
                  ><el-statistic
                    group-separator=","
                    :value="dataVolumes.ctj"
                  ></el-statistic
                ></span>
              </div>
            </li>
          </ul>
          <div
            class="centerContainerBottom"
            ref="heatMap"
            id="heatMap"
            style="width: 100%; height: 240px"
          ></div>
          <div
            class="centerContainerBottomSeg"
            style="display: flex; justifycontent: center"
          >
            <el-radio-group
              v-model="tabsValue"
              style="margin: 0 auto"
              @change="selectSemented"
            >
              <el-radio-button
                :label="item"
                v-for="item in monthList"
                :key="item"
                >{{ item }}</el-radio-button
              >
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="btnRightView">
        <h1 class="shortcuts">快捷按钮</h1>
        <div class="bantRightViewCenter">
          <div
            class="divBtnStyle pinpu"
            @click="radarBtnClick('radarSpectrum')"
          ></div>
          <div
            class="divBtnStyle dianji"
            @click="radarBtnClick('radarPlot')"
          ></div>
          <div
            class="divBtnStyle hangji"
            @click="radarBtnClick('radarTrack')"
          ></div>
          <div
            class="divBtnStyle shuju"
            @click="radarBtnClick('externalData')"
          ></div>
          <div
            class="divBtnStyle guanxi"
            @click="radarBtnClick('matchingRelation')"
          ></div>
          <div
            class="divBtnStyle sanshe"
            @click="radarBtnClick('returnScattering')"
          ></div>
        </div>
      </div>
    </div>
    <div class="flowChartStyle" style="margin-top: 10px">
      <div style="height: 50px">
        <h2 class="flowChartBannerStyle">流程图</h2>
        <a class="editBannerStyle" @click="radarBtnClick('editFlowChart')">
          编辑
        </a>
      </div>
      <div ref="x6Container"></div>
    </div>
  </div>
</template>
<script>
import { Graph } from "@antv/x6";
import * as echarts from "echarts";
import "@/assets/styles/algorithmevaluation.scss";
import moment from "moment";
import { worldMap } from "@/assets/mapJson/worldMap";
import { nameMapData } from "@/assets/mapJs/common";
//注册中国地图
echarts.registerMap("worldMap", worldMap, {});
import {
  getDataoverViewList,
  getFlightFrequencyList,
  getListPathByFlightType,
  getAirPlaneLocation,
  getDict,
  getGraphFlow,
} from "@/api/service";
export default {
  name: "",
  components: {},
  data() {
    return {
      tabsValue: "",
      dataVolumes: [],
      hotDoatData: [], //热力图数据
      listDatas: [],
      monthList: [],
      marks: [
        {
          label: "一月",
          value: 1,
        },
        {
          label: "二月",
          value: 2,
        },
        {
          label: "三月",
          value: 3,
        },
        {
          label: "四月",
          value: 4,
        },
        {
          label: "五月",
          value: 5,
        },
        {
          label: "六月",
          value: 6,
        },
        {
          label: "七月",
          value: 7,
        },
        {
          label: "八月",
          value: 8,
        },
        {
          label: "九月",
          value: 9,
        },
        {
          label: "十月",
          value: 10,
        },
        {
          label: "十一月",
          value: 11,
        },
        {
          label: "十二月",
          value: 12,
        },
      ],
      sjzl: 0,
      barChartsData: { label: [], value: [] },
      rabarChartsData: [],
      mapGeoData: null,
      forChartsMapData: [],
      echartsData: [],
      selectStartMonth: "",
      selectEndMonth: "",
      graph: null,
      data: [],
    };
  },
  created() {
    getDict("sys_target_type").then((res) => {
      if (res.code === 200) {
        this.frequencyData = res.data;
      }
    });
  },
  mounted() {
    this.getMonths();
    this.initGraph();
    // setTimeout(() => {
    //   this.initEcharts();
    // }, 50);
    getAirPlaneLocation().then((res) => {
      console.log("getAirPlaneLocation", res);
      if (res.code == 200) {
        // setMapGeoData(res.data);
        let objMapGeo = {};
        res.data.forEach((item) => {
          objMapGeo[item.airPortName] = [item.longitude, item.latitude];
        });
        console.log("echarts中的数据", objMapGeo);
        this.mapGeoData = objMapGeo;
        let dataMap = res.data.map((item) => {
          return { name: item.airPortName, value: 9 };
        });
        console.log("echarts中的数据", dataMap);
        this.forChartsMapData = dataMap;
      }
    });
  },
  beforeDestroy() {
    this.graph && this.graph.dispose();
  },
  methods: {
    initEcharts() {
      //TOP6
      const barEcharts = echarts.init(this.$refs.barEcharts);
      let option = {
        title: {
          // text: '目标类型统计',
          textStyle: {
            color: "#ccc",
          },
        },
        grid: {
          left: "4%",
          bottom: "0%",
          right: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          type: "category",
          data: this.barChartsData.label,
        },
        series: [
          {
            type: "bar",
            data: this.barChartsData.value,
          },
        ],
      };
      barEcharts.setOption(option);
      barEcharts.on("click", function (params) {
        let fType = 0;
        for (let i in this.echartsData) {
          if (params.value == this.echartsData[i].exploreNum) {
            fType = this.echartsData[i].flightType;
          }
        }
        let data = {
          startTime: this.selectStartMonth,
          endTime: this.selectEndMonth,
          flightType: fType,
        };
        this.handleGetListPathByFlightType(data);
      });

      //雷达图
      console.log("radar echarts", this.rabarChartsData, this.barChartsData);
      const radarEcharts = echarts.init(this.$refs.radarEcharts);
      let radarOption = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "20%",
          left: "20%",
          bottom: "0%",
          // right: '6%',
          // top: '40%',
          // left: '40%',
          // containLabel: true,
        },
        title: {
          // text: '目标类型统计',
          textStyle: {
            color: "#ccc",
          },
        },
        radar: {
          indicator: this.rabarChartsData,
          radius: "45%",
        },
        series: [
          {
            type: "radar",
            label: {
              show: true,
            },
            areaStyle: {},
            data: [
              {
                value: this.barChartsData.value,
              },
            ],
          },
        ],
      };
      document.getElementById("rabar").removeAttribute("_echarts_instance_");
      if (this.rabarChartsData.length > 0) {
        radarEcharts.setOption(radarOption);
      }

      //热力图
      const heatMap = echarts.init(this.$refs.heatMap);
      let heatMapOption = {
        backgroundColor: "#0e2e50",
        title: {
          // text: '热力图',
          subtext: "",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `经度: ${params?.value[0]}<br />纬度: ${params?.value[1]}`;
          },
        },
        visualMap: {
          show: true,
          type: "continuous",
          min: 0,
          max: 10,
          calculable: true,
          orient: "vertical",
          left: "left",
          bottom: "15%",
          dimension: 1,
          inRange: {
            color: ["blue", "yellow", "red"],
          },
        },
        nameMap: nameMapData,
        geo: {
          map: "worldMap",
          label: {
            emphasis: {
              show: false,
            },
          },
          regions: [
            {
              name: "211",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
                fontSize: 0,
              },
            },
          ],
          // 把中国地图放大了1.2倍
          zoom: 8, //15
          roam: true,
          center: [134.775265, 38.849163],
          itemStyle: {
            normal: {
              areaColor: "rgba(20, 41, 87,0.6)",
              borderColor: "#195BB9",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#2B91B7",
            },
          },
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "geo",
            data: this.hotDoatData,
            pointSize: 10, //设置热力图上的点大小
            symbolSize: 200,
            blurSize: 10,
            // progressive: 400
          },
          {
            // name: '基地',
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.convertData(this.forChartsMapData),
            colorBy: "data",
            zlevel: 2,
            rippleEffect: {
              color: "#7ed3f4",
              period: 4,
              scale: 4,
              brushType: "stroke",
            },
            symbolSize: 6,
            symbol: "circle",
            label: {
              normal: {
                show: true, //显示市区标签
                textStyle: { color: "#ccc", fontSize: "16px" }, //省份标签字体颜色
                formatter: (params) => {
                  return params?.data?.[3];
                },
                position: ["-130%", "150%"],
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: false, //关闭文字 （这东西有问题得关）
                textStyle: { color: "transparent" },
              },
            },
          },
        ],
      };
      document.getElementById("heatMap").removeAttribute("_echarts_instance_");
      heatMap.setOption(heatMapOption);
    },
    initGraph() {
      this.graph = new Graph({
        container: this.$refs.x6Container,
        height: 320,
        layout: {
          center: [0, 0],
        },
        panning: {
          enabled: true,
          modifiers: "alt",
          eventType: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
        },
        background: {
          // color: '#fffbe6', // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: false, // 渲染网格背景
        },
        connecting: {
          router: "orth",
        },
      });
      Graph.registerNode(
        "event",
        {
          inherit: "circle",
          attrs: {
            body: {
              strokeWidth: 2,
              stroke: "#5F95FF",
              fill: "#FFF",
            },
          },
        },
        true
      );
      Graph.registerEdge(
        "bpmn-edge",
        {
          inherit: "edge",
          attrs: {
            line: {
              stroke: "#A2B1C3",
              strokeWidth: 2,
            },
          },
        },
        true
      );
      Graph.registerNode(
        "custom-rect",
        {
          inherit: "rect",
          width: 100,
          height: 60,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
            },
          },
        },
        true
      );
      Graph.registerNode(
        "custom-circle",
        {
          inherit: "circle",
          width: 45,
          height: 45,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
            },
          },
        },
        true
      );
      Graph.registerNode(
        "custom-image",
        {
          inherit: "rect",
          width: 52,
          height: 52,
          markup: [
            {
              tagName: "rect",
              selector: "body",
            },
            {
              tagName: "image",
            },
            {
              tagName: "text",
              selector: "label",
            },
          ],
          attrs: {
            body: {
              stroke: "#5F95FF",
              fill: "#5F95FF",
            },
            image: {
              width: 26,
              height: 26,
              refX: 13,
              refY: 16,
            },
            label: {
              refX: 3,
              refY: 2,
              textAnchor: "left",
              textVerticalAnchor: "top",
              fontSize: 12,
              fill: "#fff",
            },
          },
        },
        true
      );
      Graph.registerNode(
        "custom-cylinder",
        {
          inherit: "cylinder",
          width: 62,
          height: 48,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
              refY: 32,
            },
            top: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
          },
        },
        true
      );
      Graph.registerNode(
        "custom-text",
        {
          inherit: "text-block",
          width: 60,
          height: 36,
          attrs: {
            body: {
              // strokeWidth: 0,
              rx: 4,
              ry: 4,
              fill: "#fff",
              stroke: "#fff",
            },
            text: {
              fontSize: 12,
              fill: "#000",
            },
          },
        },
        true
      );
      Graph.registerNode(
        "custom-polygon",
        {
          inherit: "polygon",
          width: 80,
          height: 38,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
            },
          },
        },
        true
      );

      Graph.registerNode(
        "custom-path",
        {
          inherit: "path",
          width: 60,
          height: 36,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
            },
          },
        },
        true
      );
      Graph.registerNode(
        "gateway",
        {
          inherit: "polygon",
          attrs: {
            body: {
              refPoints: "0,10 10,0 20,10 10,20",
              strokeWidth: 2,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            label: {
              text: "+",
              fontSize: 40,
              fill: "#5F95FF",
            },
          },
        },
        true
      );
      const cells = [];
      getGraphFlow().then((res) => {
        console.log(577, res);
        this.data = JSON.parse(res.data.chartContent);
        console.log(587, this.data);
        this.data.forEach((item) => {
          console.log("item", item.shape);
          if (item.shape === "bpmn-edge") {
            cells.push(this.graph.createEdge(item));
          } else {
            cells.push(this.graph.createNode(item));
          }
        });
        this.graph.resetCells(cells);
        this.graph.zoomToFit({ padding: 10, maxScale: 1 });
      });
    },
    filterData(value) {
      let data =
        this.frequencyData &&
        this.frequencyData.filter((item) => {
          return item?.dictValue == value;
        });
      console.log("filterData", data[0]?.dictLabel, frequencyData);
      return data[0]?.dictLabel;
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.mapGeoData[data[i].name];
        if (geoCoord) {
          res.push(geoCoord.concat(data[i].value).concat(data[i].name));
        }
      }
      return res;
    },
    getMonths() {
      const moment = require("moment");
      for (let i = 2; i >= 0; i--) {
        let lastMonth = moment().subtract(i, "months").month() + 1;
        this.marks.forEach((item) => {
          if (item.value === lastMonth) {
            this.monthList.push(item.label);
          }
        });
      }
      this.tabsValue = this.monthList[this.monthList.length - 1]; // 当前月选中
      console.log("getMonths:", this.tabsValue);
      this.selectSemented(this.tabsValue);
    },
    selectSemented(val) {
      console.log(222, val);
      let year = moment().get("year");
      let month = 0;
      this.marks.forEach((item) => {
        if (item.label === val) {
          console.log(item.value.toString().length);
          month =
            item.value.toString().length < 2
              ? "0" + item.value.toString()
              : item.value.toString();
        }
      });
      let data = {
        statMonth: `${year}-${month}`,
      };
      this.selectStartMonth = moment(`${year}-${month}-01`)
        .startOf("month")
        .format("YYYY-MM-DD");
      this.selectEndMonth = moment(`${year}-${month}-01`)
        .endOf("month")
        .format("YYYY-MM-DD");
      console.log(197, data, this.selectStartMonth, this.selectEndMonth);
      // this.setSelectTimeValue(data);
      this.getPageData(data);
    },
    setSelectTimeValue() {},
    getPageData(data) {
      getDataoverViewList(data).then((res) => {
        console.log(661, res);
        // this.barChartsData = { label: [], value: [] };
        // this.rabarChartsData = [];
        if (res.code == 200 && res?.data) {
          res.data.dataVolumes.forEach((item) => {
            switch (item.statType) {
              case 0:
                this.sjzl = item.statValue;
                break;
              case 2:
                this.dataVolumes.jcsjj = item.statValue;
                break;
              case 4:
                this.dataVolumes.zlsjj = item.statValue;
                break;
              case 7:
                this.dataVolumes.cssjj = item.statValue;
                break;
              case 5:
                this.dataVolumes.cjsjj = item.statValue;
                break;
              default:
                this.dataVolumes.ctj = item.statValue;
            }
          });
          let params = {
            startTime:
              moment(data.statMonth).startOf("month").format("YYYY-MM-DD") ||
              moment().startOf("month").format("YYYY-MM-DD"),
            endTime:
              moment(data.statMonth).endOf("month").format("YYYY-MM-DD") ||
              moment().endOf("month").format("YYYY-MM-DD"),
            flightType: res?.data?.targetTypeTops?.[0]?.flightType,
          };
          if (res?.data?.targetTypeTops?.[0]?.flightType) {
            console.log(411, params);
            // getFrequencyListHandle(params);
            this.handleGetListPathByFlightType(params);
            let echartsData = (this.echartsData = res.data.targetTypeTops.slice(
              0,
              5
            ));
            console.log("echartsdata:", echartsData);
            if (echartsData.length > 0) {
              echartsData.forEach((item) => {
                let label = "";
                this.frequencyData.forEach((item1) => {
                  // console.log(item.flightType, "=====", item1.dictCode);
                  if (item.flightType == item1.dictCode) {
                    label = item1.dictLabel;
                  } else {
                    label = "未知机型";
                  }
                });
                // Top6
                this.barChartsData.label.push(label);
                this.barChartsData.value.push(item.exploreNum);

                //雷达
                this.rabarChartsData.push({
                  name: label,
                  max: item.exploreNum + 30,
                });
              });
            }
            console.log(451, this.rabarChartsData);
          } else {
            this.barChartsData = { label: [], value: [] };
            this.rabarChartsData = [];
            this.hotDoatData = [];
          }
          this.initEcharts();
        } else {
          this.$modal.msgSuccess("未查询到数据");
        }
      });
    },
    //频率
    //获取飞行航迹的展示
    handleGetListPathByFlightType(params) {
      getListPathByFlightType(params).then((res) => {
        console.log("hot charts", res);
        if (res.code == 200) {
          let dataSouce3 = [];
          let dataSouce2 = res?.data
            ?.map((item) => {
              return item?.locationList?.map((iten) => {
                return [iten?.longitude, iten?.latitude, undefined];
              });
            })
            .filter((itex) => {
              return itex;
            })
            .map((itey) => {
              console.log(2222, itey);
              return dataSouce3.push(...itey);
            });
          // console.log("hotDoatData:", dataSouce3);
          this.hotDoatData = dataSouce3;
        }
      });
    },
    radarBtnClick(val) {
      console.log("radarBtnClick", val);
      switch (val) {
        case "editFlowChart":
          this.$router.push({
            path: "/dataAnalysis/editFlowChart",
            query: {},
          });
          break;
        case "radarSpectrum":
          this.$router.push({
            path: "/dataAnalysis/spotevalution8203",
            query: {},
          });
          break;
        case "radarPlot":
          this.$router.push({
            path: "/dataAnalysis/spotevalutionyangben",
            query: {},
          });
          break;
        case "matchingRelation":
          this.$router.push({
            path: "/dataAnalysis/relateform",
            query: {},
          });
          break;
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-statistic .con .number {
  color: #c4ebff;
}
::v-deep .el-button + .el-button {
  margin: 0;
}
::v-deep .el-button--medium {
  border-radius: 0px;
}
::v-deep .topH2Style .con .number {
  font-size: 32px;
}
</style>
